<template>
  <view>
    <el-steps :active="active" finish-status="success" simple style="margin-top: 20px">
      <el-step title="数据选择"> </el-step>
      <el-step title="数据预览" />
      <el-step title="特征选择" />
      <el-step title="模型选择" />
      <el-step title="执行结果" />
    </el-steps>
    <el-divider />

    <el-row :span="24">
      <el-col :span="20"> </el-col>
      <el-col :span="4">
        <div class="dialog-footer">
          <el-button sizle type="default" @click="preStep">上一步</el-button>
          <el-button sizle type="success" @click="nextStep">下一步</el-button>
        </div></el-col
      >
    </el-row>
    <el-divider />
    <view>
      <data-select v-show="active == 1" v-model:Ids="Ids" v-model:data="selectedData" />
    </view>
    <!--数据预览-->
    <view v-if="active == 2">
      <iframe style="width: 100%; height: 100vh; border: 0" frameborder="0" :src="`http://viewer.apisev.cn/viewer/preview/${selectedData.id}`"></iframe>
    </view>
    <view>
      <field-select v-show="active == 3" :id="selectedData.id" v-model:selectedFileds="selectedFileds" :fileds="fields"></field-select>
    </view>
    <view>
      <alg-select v-show="active == 4" v-model:data="selectedAlg" :list="algs"></alg-select>
    </view>
    <view>
      <run-result :taskId="taskId" v-if="active == 5 && taskId"></run-result>
    </view>
    <!-- <run-result :taskId="taskId"></run-result> -->
  </view>
</template>

<script setup>
import DataSelect from "../components/DataSelect/index.vue";
import AlgSelect from "../components/AlgSelect/index.vue";
import FieldSelect from "../components/FieldSelect/index.vue";
import RunResult from "../components/RunResult/index.vue";

import request from "@/utils/request";
import { onMounted } from "vue";
import stringRandom from "string-random";
const active = ref(1);
const iframeSrc = ref("");
const Ids = ref([]);
const selectedData = ref({});

const algs = ref([]);
const selectedAlg = ref(null);
const taskId = ref(10086);
const fields = ref([]);
const selectedFileds = ref([]);
const { proxy } = getCurrentInstance();

function initData() {
  // request("/data/list").then((res) => {
  //   console.log(res);
  // });
  request({
    url: "http://localhost:8000/code/list",
    method: "get",
  }).then((res) => {
    algs.value = res;
  });
}
function preStep() {
  if (active.value > 1) {
    active.value = active.value - 1;
  }
}
function nextStep() {
  if (active.value == 1) {
    let list = Ids.value;
    // console.log(list);
    if (list.length == 0) {
      proxy.$modal.msgError("请选择数据");
    } else if (list.length > 1) {
      proxy.$modal.msgError("只能选择一条数据");
    } else {
      //    console.log(selectedData.value);
      active.value = 2;
    }
  } else if (active.value == 2) {
    proxy.$modal.loading("获取向量列表中");
    // 执行
    request({
      url: "http://localhost:8000/code/fields/" + selectedData.value.id,
      method: "get",
    }).then((res) => {
      console.log(res);
      active.value = 3;
      proxy.$modal.closeLoading();
      fields.value = res;
    });
  } else if (active.value == 3) {
    let list = selectedFileds.value;
    if (list.length < 3) {
      proxy.$modal.msgError("请选择不少于3个向量");
    } else {
      // 赋值
      taskId.value = stringRandom(11, { letters: false });
      //    console.log(selectedData.value);
      active.value = 4;
    }
  } else if (active.value == 4) {
    if (selectedAlg.value != null) {
      active.value = 5;
      // 此处执行算法
      doTrain();
    } else {
      proxy.$modal.msgError("请选择训练模型");
    }
  }
}
function doTrain() {
  //taskId.value = 10086;
  // console.log(selectedAlg.value)
  request({
    url: "http://localhost:8000/code",
    method: "post",
    data: {
      task_id: taskId.value,
      data_url: "http://mq.apisev.cn/disk/download/" + selectedData.value.id,
      model: selectedAlg.value.id,
      fields: selectedFileds.value,
    },
  }).then(res=>{
    console.log(res)
  })
  //   console.log("选中算法为:" + selectedAlg.value.name);
  //   if (selectedAlg.value.id == "bp") {
  //     request("/code/bp?task_id=" + taskId.value);
  //   } else if (selectedAlg.value.id == "ssa-ssabigru") {
  //     request("/code/ssabigru?task_id=" + taskId.value);
  //   } else if (selectedAlg.value.id == "cnn-ssabigru") {
  //     request("/code/cnnbigru?task_id=" + taskId.value);
  //   }

  // request("/code/bp?task_id=" + taskId.value);
}
onMounted(() => {
  // console.log(ws);
  // if (ws.readyState == 1) {
  //   let msg = JSON.stringify({
  //     content:'hello world'
  //   });
  //   ws.send(msg);
  // }
});
//initCascader();
initData();
</script>

<style scoped lang="scss">
.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
